<template>
  <!-- 页脚 -->
  <footer>
    <div class="container fgrid">
      <div>
        <div class="brand" style="margin-bottom:10px">
          <div class="logo"></div> <b>灵犀</b>
        </div>
        <div class="muted">AI 视频智能体平台，致力于让每个团队 10 分钟出片。</div>
        <div class="news" style="margin-top:14px">
          <input placeholder="订阅最新模板与活动" v-model="subscribeEmail" />
          <button @click="handleSubscribe">订阅</button>
        </div>
      </div>
      <div>
        <h4>产品</h4>
        <div><a href="#features">视频生成器</a></div>
        <div><a href="#features">智能编辑器</a></div>
        <div><a href="#features">翻译/配音</a></div>
      </div>
      <div>
        <h4>资源</h4>
        <div><a href="#market">模板市场</a></div>
        <div><a href="#faq">帮助中心</a></div>
        <div><a href="#">开发者文档</a></div>
      </div>
      <div>
        <h4>公司</h4>
        <div><a href="#">关于我们</a></div>
        <div><a href="#">加入我们</a></div>
        <div><a href="#">联系销售</a></div>
      </div>
      <div>
        <h4>关注我们</h4>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px">
          <div style="text-align:center">
            <img src="https://api.qrserver.com/v1/create-qr-code/?size=90x90&data=https://example.com/wechat" alt="微信二维码" style="width:90px;height:90px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px"/>
            <div class="muted" style="font-size:12px">微信</div>
          </div>
          <div style="text-align:center">
            <img src="https://api.qrserver.com/v1/create-qr-code/?size=90x90&data=https://example.com/douyin" alt="抖音二维码" style="width:90px;height:90px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px"/>
            <div class="muted" style="font-size:12px">抖音</div>
          </div>
        </div>
      </div>
    </div>
    <div class="container" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:18px">
      <div>© 2025 灵犀云创 · AI 视频智能体平台</div>
      <div class="muted">
        <a href="#" class="footer-link">隐私政策</a> · 
        <a href="#" class="footer-link">服务条款</a> · 
        <a href="#" class="footer-link">联系我们</a>
      </div>
      <div class="share" style="display:flex;justify-content:center;gap:6px">
        <a href="#" title="分享至微信" class="share-icon">💬</a>
        <a href="#" title="分享至微博" class="share-icon">📱</a>
        <a href="#" title="分享至Twitter" class="share-icon">🐦</a>
        <a href="#" title="复制链接" class="share-icon" @click="copyLink">🔗</a>
      </div>
    </div>
  </footer>

  <!-- 返回顶部按钮 -->
  <button id="backtop" class="backtop" aria-label="返回顶部" @click="scrollToTop" v-show="showBackTop">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M18 15l-6-6-6 6"/>
    </svg>
  </button>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 状态变量
const subscribeEmail = ref('');
const showBackTop = ref(false);

// 订阅处理
const handleSubscribe = () => {
  if (!subscribeEmail.value || !subscribeEmail.value.includes('@')) {
    alert('请输入有效的邮箱地址');
    return;
  }
  
  // 这里可以添加实际的订阅逻辑，例如API调用
  console.log('订阅邮箱:', subscribeEmail.value);
  alert('订阅成功！感谢您的关注。');
  subscribeEmail.value = '';
};

// 复制链接
const copyLink = () => {
  navigator.clipboard.writeText(window.location.href)
    .then(() => {
      alert('链接已复制到剪贴板');
    })
    .catch(err => {
      console.error('复制失败:', err);
    });
};

// 滚动到顶部
const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

// 监听滚动事件，控制返回顶部按钮显示
const handleScroll = () => {
  showBackTop.value = window.scrollY > 600;
};

// 生命周期钩子
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  handleScroll(); // 初始检查
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
/* 页脚样式 */
footer {
  background: var(--footer-bg);
  padding: 60px 0 30px;
  color: var(--text);
}

.fgrid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}

.brand {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
}

.logo {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background-color: var(--primary);
  border-radius: 6px;
}

.muted {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.news {
  display: flex;
  margin-top: 16px;
}

.news input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px 0 0 6px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  outline: none;
}

.news button {
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--line);
  border-left: none;
  border-radius: 0 6px 6px 0;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.news button:hover {
  background: rgba(0, 102, 255, 0.1);
}

footer h4 {
  font-size: 16px;
  margin-bottom: 16px;
  font-weight: 600;
}

footer a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  display: block;
  margin-bottom: 10px;
  transition: color 0.2s ease;
}

footer a:hover {
  color: var(--primary);
}

.footer-link {
  display: inline;
  margin: 0 4px;
}

.share-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hover);
  transition: all 0.2s ease;
}

.share-icon:hover {
  transform: scale(1.1);
  background: var(--primary-light);
}

/* 返回顶部按钮 */
.backtop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 100;
}

.backtop svg {
  width: 20px;
  height: 20px;
}

.backtop:hover {
  background: var(--hover);
  transform: translateY(-3px);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .fgrid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .fgrid > div:first-child {
    grid-column: 1 / -1;
  }
  
  .fgrid > div:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .fgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 480px) {
  .fgrid {
    grid-template-columns: 1fr;
  }
  
  footer .container:last-child {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
</style>